<template>
	<view style="height: 99.999vh;width: 100vw;overflow: hidden;">
		<image src="../../static/login.png" mode="heightFix" style="height: 100vh;transform: translate(-43%);"/>
		<view class="page-main">
			<view style="font-size: 76upx;font-weight: 700;">登录</view>
			<up-form :model="form" ref="uFormRef" :rules="rules">
				<up-form-item prop="name">
					<up-input placeholder="请输入工号" v-model="form.name" />
				</up-form-item>
				<up-form-item prop="phone">
					<up-input placeholder="请输入电话" v-model="form.phone" />
				</up-form-item>
			</up-form>
			<view style="margin-top: 70rpx;">
			<up-button type="primary" text="登录" @click="submit"></up-button>
		</view>
		</view>
		<logo></logo>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const form = ref({
	name: '',
	phone: ''
});
const uFormRef = ref(null)
const rules = {
	name: [
		{
			required: true,
			message: '请输入工号',
			trigger: ['blur', 'change'],
		},
	],
	phone: [
		{
			required: true,
			message: '请输入电话',
			trigger: ['blur', 'change'],
		},
	],
};
const submit = async () => {
	const valid = await uFormRef.value.validate()
	console.log('', valid);
	try {
		if (valid) return uni.redirectTo({ url: '/pages/index/index' })
	} catch (error) {
		// 处理验证错误  
	}
}  
</script>

<style lang="less" scoped>
.page-main {
	z-index: 999;
	width: 630rpx;
	position: fixed;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
}
</style>